<template>
  <div class="bill_info_show">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"/>
    <div id="jobInfo">
      <van-cell-group>
        <van-cell title="账号类型" :value=billInfo.accTyp />
      </van-cell-group>
      <div style="height: 10PX"></div>
      <van-cell-group>
        <van-cell title="时间" :value=billInfo.accDate />
        <van-cell title="账号" :value='billInfo.accNo | account' />
        <van-cell title="户名" :value=billInfo.accNm />
        <van-cell title="余额" :value='billInfo.accAmt | account' />
        <van-cell title="币种" :value=billInfo.accCur />
      </van-cell-group>
      <div style="height: 10PX"></div>
      <van-cell-group>
        <van-cell title="状态" :value=billInfo.statue  />
      </van-cell-group>
    </div>
    <div v-show="haveRecord">
      <van-collapse v-model="activeNames">
        <van-collapse-item title="对账记录" name="1">
          <div id="resultList">
            <div v-for="record in recordList" :key="record.index">
              <table style="width: 100%">
                <tr>
                  <td class="leftside wordcs">核对人：{{record.name}}</td>
                  <td class="rtd">
                    {{record.telnum}}
                  </td>
                </tr>
                <tr>
                  <td class="amt">调整金额：{{record.amt | currency }}</td>
                  <td class="rtd">{{record.date}}</td>
                </tr>
                <tr>
                  <td colspan="2">备注：{{record.remark}}</td>
                </tr>
              </table>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import {
  CellGroup, Collapse, CollapseItem, List
} from 'vant';

export default {
  components: {
    [CellGroup.name]: CellGroup,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [List.name]: List,
  },
  data() {
    return {
      haveRecord: false,
      activeNames: ['2'],
      title: '',
      billInfo: {
        accTyp: '对公活期',
        accDate: '2020-08',
        accNm: '上海新晨信息集成系统有限公司',
        accNo: '6355555521482',
        accAmt: '20000000',
        statue: '未对账',
        accCur: '人民币',
      },
      recordList: [{
        name: '张喜',
        telnum: '13565896589',
        amt: '5000000',
        date: '2020-08-01',
        remark: '资产信息调整',
      }],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickAccept() {
      this.$router.go(-1);
    },
    onClickRefuse() {
      this.$router.push('AddBillInfo');
    },
  },
  created() {
    console.log(this.$route.params);
    if (!this.$store.state.yqdzTitle && this.$route.params.item.statue > 1) {
      this.haveRecord = true;
    } else {
      this.haveRecord = false;
    }
    if (this.$store.state.yqdzTitle) {
      this.title = '未完成对账';
    } else {
      this.title = '已完成对账';
    }
  },
};
</script>

<style lang="less">
  .bill_info_show{
    background-color: #f3f6f9;
    height: 100vh;
    .jobInfo{
      margin-top: 10px;
    }
    .van-cell__value {
      min-width: 70%;
    }
    .van-cell__value span {
      display: inline-block;
      text-align: left;
      word-break: break-all;
    }
    .rtd{
      text-align: right;
      height: 40PX;
      line-height: 40PX;
    }
  }
</style>
